<template>
  <div class="medicine_info_search">
    <!-- 药品信息条件搜索表单 -->
    <el-form :model="medicine">
      <el-row class="search_condition_row1">
        <!-- 药品名称 -->
        <el-col :span="5">
          <el-input placeholder="请输入药品名称" v-model="medicine.name" clearable>
            <template slot="prepend">药品名称</template>
          </el-input>
        </el-col>
        <!-- 进货价格 -->
        <el-col :span="5" :offset="1">
          <el-input placeholder="请输入进货价格" v-model.number="medicine.purchasePrice" clearable>
            <template slot="prepend">进货价格</template>
          </el-input>
        </el-col>
        <!-- 零售价格 -->
        <el-col :span="5" :offset="1">
          <el-input placeholder="请输入零售价格" v-model.number="medicine.retailPrice" clearable>
            <template slot="prepend">零售价格</template>
          </el-input>
        </el-col>
        
      </el-row>
      <el-row class="search_condition_row2">
        <!-- 生产日期 -->
        <el-col :span="5">
          <el-date-picker
            v-model="medicine.manufactureData"
            align="center"
            type="date"
            placeholder="请选择药品生产日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-col>
        <!-- 有效日期 -->
        <el-col :span="5">
          <el-date-picker
            v-model="medicine.expirationDate"
            align="center"
            type="date"
            placeholder="请选择药品有效日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-col>
      </el-row>
      <el-row class="search_condition_row3">
        <!-- 药品等级 -->
        <el-col :span="5">
          <el-select clearable placeholder="请选择药品类别" v-model="medicine.medicineType">
            <el-option
              v-for="item in medicineTypeDownBox"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <!-- 是否医保 -->
        <el-col :span="5">
          <el-select clearable placeholder="请选择是否为医保" v-model="medicine.medicalInsurance">
              <el-option key="医保" label="医保" value="医保"></el-option>
              <el-option key="非医保" label="非医保" value="非医保"></el-option>
          </el-select>
        </el-col>
        <!-- 是否捐赠物资 -->
        <el-col :span="5">
          <el-select clearable placeholder="请选择是否为捐赠物资" v-model="medicine.donate">
              <el-option key="捐赠" label="捐赠" value="捐赠"></el-option>
              <el-option key="非捐赠" label="非捐赠" value="非捐赠"></el-option>
          </el-select>
        </el-col>
        <!-- 搜索药品信息按钮 -->
        <el-col :span="5" :offset="1">
          <el-button type="primary" icon="el-icon-search" @click="searchMedicine">搜索药品信息</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'medicineSearch',
    data() {
      return {
        /* 药品信息信息 */
        medicine: {
          name: '',
          medicineType: '',
          purchasePrice: '',
          retailPrice: '',
          manufactureData: '',
          expirationDate: '',
          medicalInsurance: '',
          donate: '',
        },
        /* 药品类别下拉框数据 */
        medicineTypeDownBox: [],
        /* 日期选择快捷键 */
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      }
    },
    methods: {
      /* 搜索药品类别事件 */
      searchMedicine() {
        this.$bus.$emit('getMedicinePageList',this.medicine)
        this.$bus.$emit('getMedicineTotal')
      },
      /* 获得药品类别下拉框数据 */
      async getMedicineTypeData() {
        const { data: res } = await this.$http.get('workbench/medicineType/getMedicineTypeData.do')
          if (res.code == '1') {
            this.medicineTypeDownBox = res.others
          } else {
              console.log('获取药品类别下拉框数据失败!')
          }
      },
    },
    created() {
      this.getMedicineTypeData()
    }
  }

</script>

<style scoped>
  /* 搜索药品信息表单 */
  .el-form {
    padding: 20px 20px;
  }

  .search_condition_row1 {
    margin-bottom: 20px;
  }

  .search_condition_row2 {
    margin-bottom: 20px;
  }

  .el-input {
    width: 270px;
  }
</style>